<template>
    <div class="big">
        <!-- 导航栏 -->
        <div class="navigation">
            <div class="icon" @click="back">
                <img src="../../assets/home-img/返回1.png" alt="">
            </div>
            <h2 class="title">
                <div class="van-ellipsis">{{ heaithDetailList.title }}</div>
            </h2>
            <div class="icon">
                <img src="../../assets/home-img/分享1.png" alt="">
            </div>
        </div>
        <!-- 视频 -->
        <div class="video">
            <video src="../../assets/home-img/视频.MP4" controls style="width: 100%; height: 100%;">
                <!-- <source src="" type="video/mp4"> -->
            </video>
        </div>
        <!-- 问题 -->
        <h2 class="problem">{{ heaithDetailList.title }}</h2>
        <!-- 医生信息 -->
        <div class="doctor">
            <div class="doctorLeft">
                <img src="../../assets/home-img/会员中心.png" alt="">
            </div>
            <div class="doctorRight">
                <h5 class="top">
                    {{ heaithDetailList.name }}&ensp;
                    <img class="v" src="../../assets/home-img/v标.png" alt="">&nbsp;
                    <span style="color: #999798;">{{ heaithDetailList.position }}</span>&nbsp;
                    <span class="Trimethylamine" v-if="heaithDetailList.advanced === true">三甲</span>
                </h5>
                <p class="Department">
                    {{ heaithDetailList.class }}&ensp;{{ heaithDetailList.hospital }}
                </p>
            </div>
        </div>
        <!-- 具体 -->
        <div class="specific">
            <p>
                {{ heaithDetailList.chi }}{{ heaithDetailList.chi }}{{ heaithDetailList.chi }}{{ heaithDetailList.chi }}
                {{ heaithDetailList.chi }}{{ heaithDetailList.chi }}{{ heaithDetailList.chi }}{{ heaithDetailList.chi }}
            </p>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import http from '../../http/http';

const route = useRoute();
const router = useRouter();
const id = ref(route.query.id);
const heaithDetailList = ref([]);

const getHeaithDetailList = async () => {
    await http.get(`/science?id=${id.value}`).then(res => {
        heaithDetailList.value = res.data.data;
    })
}


const back = () => {
    router.back();
}

onMounted(() => {
    getHeaithDetailList()
})

</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.big {
    width: 100%;
    height: 100vh;
    overflow: scroll;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }

    .navigation {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;

        .icon {
            margin: 0 20px;

            img {
                width: 50px;
                height: 50px;
                border-radius: 27.5px;
            }
        }

        .title {
            font-size: 40px;
            width: 60%;
            text-align: center;
        }
    }

    .video {
        width: 100%;
        height: 400px;
        background-color: #ccc;
    }

    .problem {
        padding: 0 20px;
        line-height: 80px;
    }

    .doctor {
        margin: 5px auto;
        padding: 0 20ox;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;

        .doctorLeft {
            width: 16%;
            display: flex;

            img {
                width: 90px;
                height: 90px;
                border-radius: 45px;
            }
        }

        .doctorRight {
            width: 84%;

            .top {
                height: 55px;
                font-size: 25px;
                font-weight: normal;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                img {
                    width: 30px;
                    height: 30px;
                }

                .Trimethylamine {
                    display: inline-block;
                    background-color: #1e70f8;
                    color: #fff;
                    padding: 0 10px;
                    border-radius: 8px;
                }
            }

            .Department {
                color: #626262;
            }
        }
    }

    .specific {
        padding: 0 20px;

        p {
            letter-spacing: 2px;
            line-height: 40px;
            font-size: 26px;
        }
    }
}
</style>
